<template>
	<view class="z-paging-slot-top">
		<!-- 标题栏和状态栏占位符 -->
		<view class="title-placeholder"></view>
		<view class="cu-bar search ">
			<view class="cu-avatar round logo">
			</view>
			<view class="search-form radius search-bar" v-if="searchBar">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="关键字搜索" confirm-type="search"></input>
			</view>
			<view class="title" v-if="title&&!searchBar">{{title}}</view>
			<view class="center">
				<slot name="center"></slot>
			</view>
			<view class="action" v-if="!searchBar&&$slots.right">
				<slot name="right"></slot>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "home-title-bar",
		props: {
			searchBar: {
				type: Boolean,
				default: true
			},
			title:{
				type:[String,Object],
				default:""
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.z-paging-slot-top {
		background: $hub-color-theme;

		.search-bar {
			background-color: #FFFFFF;
		}

		.logo {
			background-color: transparent;
		}
		.title{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			font-size: 34rpx;
		}
		.center{
			width: 40%;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.title-placeholder {
		height: var(--status-bar-height);
		// padding-top: 44px;
		box-sizing: content-box;
	}
</style>
